.timlinewrap {
    text-align: center;
    position: relative;
}

@media screen and (max-width:768px) {
    .timeline {
        display: none;
    }
}

.timeline:before {
    position: absolute;
    z-index: 1;
    content: "";
    width: 1px;
    height: 100%;
    background-color: #88e2e2;
    top: 0;
    left: 150px;
}



.timelineleft {
    position: absolute;
    width: 300px;
    top: -50px;
    left: -320px;
}

.timelineright {
    position: absolute;
    width: 300px;
    top: -50px;
    right: -320px;
}

.timeline .infoblock {
    position: relative;
    z-index: 2;
    visibility: hidden;
}

.timeline .visible-change {
    visibility: visible;
}

.timeline .infoblock img {
    width: 300px;
    height: auto;
}

.timeline .circle {
    position: relative;
    z-index: 2;
    margin: 30px 0;
    opacity: 0;
    transition: all 0.5s;
    position: relative;
}

.timeline .circle img {
    width: 30%;
    height: auto;
    cursor: pointer;
}

.timelineright .circle img:nth-child(2) {
    position: absolute;
    width: 17%;
    left: 30%;
    top: 45%;
    animation: move45deg2right 1s infinite alternate;
}

@keyframes move45deg2right {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(10px, -10px);

    }

}

@keyframes move45deg2left {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-10px, -10px);

    }

}

.timelineleft .circle img:nth-child(2) {
    position: absolute;
    width: 17%;
    right: 30%;
    top: 45%;
    animation: move45deg2left 1s infinite alternate;
}